<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      列表渲染，使用 v-for 指令来循环渲染元素或组件

        语法：
          v-for="item in xxx"
            xxx - 数据，一般是数组
            item - 数组项目
          v-for="(item, index) in xxx"
            xxx - 数据，一般是数组
            item - 数组项目
            index - 数组下标
          v-for="item in obj"
            obj - 数据，是一个对象
            item - 是对象的value值
          v-for="(item, key, index) in obj"
            obj - 数据，是一个对象
            item - value
            key - key
            index - 下标
          v-for="item in number"
            number - 数据，是一个数字，数字会变成一个数组的形式
              1 [1]
              2 [1, 2]
              3 [1, 2, 3]

      key
        是什么：是一个特殊的属性，配合 v-for 一起使用，用于对元素做标识，利于Vue内部做虚拟DOM diff 算法时的优化。
        PS: 如果在 v-for 的时候，没有设置 key 属性的化，一般都报一个警告
            key 在循环时，需要确保循环的每个元素都有一个唯一的key值，如果key值有相同的化，也会报错。默认没有设置 key 时，他内部会使用循环时的下标作为key值。

      虚拟DOM:
        什么是虚拟DOM: 他就是一个 JS 对象，用于描述真实DOM 格式
      Diff算法：
        当数据有变化的时候，Vue会重新运行render函数，得到一份新的虚拟DOM,新旧两份虚拟DOM会做一个比较（diff），比较出最小的变化点，然后去操作真实DOM的修改。
   -->

    <div id="app">
      <p>key的作用</p>
      <button @click="add">添加一个梨子</button>
      <ul>
        <li v-for="item in fruitsTwo" :key="item.id">
          {{ item.name }} - {{ item.price }}
          <input type="text" />
        </li>
      </ul>

      <p>数组遍历</p>
      <ul>
        <li v-for="(item, index) in fruits" v-bind:key="index">
          {{ item }} - {{ index }}
        </li>
      </ul>
      <p>对象遍历</p>
      <ul>
        <li v-for="(item, key, index) in person">
          {{ item }} - {{ key }} - {{ index }}
        </li>
      </ul>
      <p>数字遍历</p>
      <ul>
        <li v-for="(item, index) in 10">{{ item }} - {{ index }}</li>
      </ul>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          fruits: ["Apple", "Banana", "Orange"],
          fruitsTwo: [
            { id: 1, name: "苹果", price: 5 },
            { id: 2, name: "香蕉", price: 3 },
            { id: 3, name: "橘子", price: 1 },
          ],
          person: {
            name: "张三",
            age: 18,
            sex: "男",
          },
        },
        methods: {
          add() {
            // 对 fruitsTwo 做一个头部添加
            this.fruitsTwo.unshift({ id: 4, name: "梨子", price: 4 });
          },
        },
        // 渲染函数，如果有提供该函数的话，最终页面将由这个函数中返回的虚拟DOM来生成。
        //         如果没有提供该函数的话，Vue 内部会将挂载点的内容做为模板生成 render 函数。
        //    createElement - 是一个用于创建虚拟DOM的函数，一般会简写成一个 h
        //
        // render(h) {
        //   // console.log("render", h);
        //   // <h1>Hello World</h1>
        //   // const vDOM = h("h1", null, "Hello World");
        //   // console.log(vDOM);

        //   // <div title="hello">
        //   //   <h1>Hello World</h1>
        //   //   <button>按钮</button>
        //   // </div>
        //   const vDOM = h("div", { attrs: { title: "hello" } }, [
        //     h("h1", null, "Hello World"),
        //     h("button", null, "按钮"),
        //   ]);

        //   return vDOM;
        // },
      });
    </script>
  </body>
</html>
